<template>
    <div>
        <el-steps :active="active" finish-status="success">
            <el-step title="选择商品分类"></el-step>
            <el-step title="填写商品详情"></el-step>
            <el-step title="商品发布成功"></el-step>
        </el-steps>
        <div class="from1" v-if="active == 0">
            <el-cascader-panel :options="options" v-model="value" @change="handleChange"></el-cascader-panel>
        </div>
        <div class="from1" v-if="active == 1">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top:50px;padding-left:25px">
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.shopdata.first}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.shopdata.second}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.shopdata.third}}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="padding-top:20px">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                     <el-input v-model="ruleForm.price"></el-input>
                </el-form-item>
                <el-form-item label="商品库存" prop="stock">
                     <el-input v-model="ruleForm.stock"></el-input>
                </el-form-item>
                <el-divider></el-divider>
            </el-form>

            <el-upload
            class="upload-demo"
            ref="upload"
            action='http://localhost:8080/elupload'
            multiple
            limit="5"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传JPG文件，且不超过2MB</div>
            </el-upload>

        </div>
        <div class="from1" v-if="active == 3">
            <p>商品发布成功</p>
        </div>
        <el-button style="margin-top: 12px;" @click="next" v-if="active == 0">下一步</el-button>
        <el-button style="margin-top: 12px;" @click="finish" v-if="active == 1">完成</el-button>
    </div>
</template>

<script>
export default {
    name:"upproduct",
    data() {
      return {
        fileList: [],
        ruleForm: {
            name: '',
            price: '',
            stock: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入商品价格', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
         stock: [
            { required: true, message: '请输入商品库存', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        },
        shopdata:{
            'first': '',
            'second': '',
            'third': '',
        },
        active: 0,
        options: [{
          value: 'electronic',
          label: '电子产品',
          children: [{
            value: 'computer',
            label: '电脑',
            children: [{
              value: 'HASEE',
              label: 'HASEE'
            }, {
              value: '外星人',
              label: '外星人'
            }, {
              value: 'HUAWEI',
              label: '华为'
            }, {
              value: '华硕',
              label: '华硕'
            }, {
              value: '小米',
              label: '小米'
            }, {
              value: '联想',
              label: '联想'
            }, {
              value: 'ROG',
              label: 'ROG'
            }]
          }, {
            value: 'table_computer',
            label: '平板',
            children: [{
              value: 'Apple',
              label: '苹果'
            }, {
              value: '小米',
              label: '小米'
            }, {
              value: 'HUAWEI',
              label: '华为'
            }, {
              value: '微软',
              label: '微软'
            }, {
              value: '联想',
              label: '联想'
            }]
          }, {
            value: 'phone',
            label: '手机',
            children: [{
              value: 'Apple',
              label: '苹果'
            }, {
              value: 'IQOO',
              label: 'IQOO'
            }, {
              value: 'Realme',
              label: '真我'
            }, {
              value: '黑鲨',
              label: '黑鲨'
            }, {
              value: 'HUAWEI',
              label: '华为'
            }, {
              value: 'OPPO',
              label: 'OPPO'
            }, {
              value: 'VIVO',
              label: 'VIVO'
            }]
          }]
        },
        {
          value: 'decorate',
          label: '装饰产品',
          disabled: true,
          children:[{
            value: 'no',
            label: '暂无产品',
          }]
        },{
          value: 'menswear',
          disabled: true,
          label: '男装产品',
          children:[{
            value: 'no',
            label: '暂无产品',
          }]
        },{
          value: 'food',
          disabled: true,
          label: '食品产品',
          children:[{
            value: 'no',
            label: '暂无产品',
          }]
        },{
          value: 'nursing',
          disabled: true,
          label: '护理产品',
          children:[{
            value: 'no',
            label: '暂无产品',
          }]
        },{
          value: 'house',
          disabled: true,
          label: '房产产品',
          children:[{
            value: 'no',
            label: '暂无产品',
          }]
        },{
          value: 'clean',
          disabled: true,
          label: '清洁产品',
          children:[{
            value: 'no',
            label: '暂无产品',
          }]
        }]
      }
    },  

    methods: {
      next() {
          if (this.shopdata.third == ''){
              alert("请选择商品类型")
          }else{
              console.log(this.shopdata.third);
              if (this.active++ > 2) this.active = 0;
          }
      },
      finish(){
            this.$axios.post("/api/upproduct",this.$querystring.stringify({
            shop:this.$cookies.get("shopname"),
            brand:this.shopdata.third,
            category:this.shopdata.second,
            name:this.ruleForm.name,
            price:this.ruleForm.price,
            stock:this.ruleForm.stock
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
            this.$refs.upload.submit();
            this.active = 3
            }else{
               alert("上传商品失败")
            }
        });
      },
      handleChange(value) {
        this.shopdata.first = value[0],
        this.shopdata.second = value[1],
        this.shopdata.third = value[2],
        console.log(this.shopdata);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed() {
        this.$message.warning('最多只可以选择5个文件');
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      }
    }
    
}
</script>